
<script>
import { showTime } from "../utils";
import axios from "axios";
import niuIcon from '@/assets/牛.png'
import yangIcon from '@/assets/羊.png'
import tuIcon from '@/assets/兔.png'
export default {
  data() {
    return {
      dateTimeText: '',
    };
  },
  methods: {
  },
  mounted() {
    setInterval(() => {
      this.dateTimeText = showTime();
    }, 1000); //间隔多少毫秒执行一次这个方法
    axios.get('/api/farm/list').then(res => {
      console.log(res);
      let list = res.data.data
      let cityList = []
      list.forEach(item => {
        if (cityList.indexOf(item.city) === -1) {
          cityList.push(item.city)
        }
      })
      // 创建地图实例
      const map = new BMapGL.Map("mapBox");
      map.setMapStyleV2({
        styleJson: [{
          "featureType": "land",
          "elementType": "geometry",
          "stylers": {
            "color": "#0d335dff",
            "visibility": "on"
          }
        }, {
          "featureType": "water",
          "elementType": "labels.text.fill",
          "stylers": {
            "color": "#0d335dff",
            "visibility": "on"
          }
        }, {
          "featureType": "building",
          "elementType": "geometry.fill",
          "stylers": {
            "color": "#02274eff",
            "visibility": "on"
          }
        }, {
          "featureType": "building",
          "elementType": "geometry.stroke",
          "stylers": {
            "color": "#001535ff",
            "visibility": "on"
          }
        }, {
          "featureType": "water",
          "elementType": "geometry",
          "stylers": {
            "color": "#062444ff",
            "visibility": "on"
          }
        }, {
          "featureType": "village",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "town",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "district",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "country",
          "elementType": "labels.text.fill",
          "stylers": {
            "color": "#062444ff",
            "visibility": "on"
          }
        }, {
          "featureType": "city",
          "elementType": "labels.text.fill",
          "stylers": {
            "color": "#062444ff",
            "visibility": "on"
          }
        }, {
          "featureType": "continent",
          "elementType": "labels.text.fill",
          "stylers": {
            "color": "#062444ff",
            "visibility": "on"
          }
        }, {
          "featureType": "poilabel",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "poilabel",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "scenicspotslabel",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "scenicspotslabel",
          "elementType": "labels.text.fill",
          "stylers": {
            "color": "#062444ff",
            "visibility": "on"
          }
        }, {
          "featureType": "transportationlabel",
          "elementType": "labels.text.fill",
          "stylers": {
            "color": "#062444ff",
            "visibility": "on"
          }
        }, {
          "featureType": "transportationlabel",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "airportlabel",
          "elementType": "labels.text.fill",
          "stylers": {
            "color": "#062444ff",
            "visibility": "on"
          }
        }, {
          "featureType": "airportlabel",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "road",
          "elementType": "geometry.fill",
          "stylers": {
            "color": "#0a2b4dff",
            "visibility": "on"
          }
        }, {
          "featureType": "road",
          "elementType": "geometry.stroke",
          "stylers": {
            "color": "#000825ff",
            "visibility": "on"
          }
        }, {
          "featureType": "road",
          "elementType": "geometry",
          "stylers": {
            "weight": 3
          }
        }, {
          "featureType": "green",
          "elementType": "geometry",
          "stylers": {
            "color": "#0c3156ff",
            "visibility": "on"
          }
        }, {
          "featureType": "scenicspots",
          "elementType": "geometry",
          "stylers": {
            "color": "#0d335dff",
            "visibility": "on"
          }
        }, {
          "featureType": "scenicspots",
          "elementType": "labels.text.fill",
          "stylers": {
            "color": "#062444ff",
            "visibility": "on"
          }
        }, {
          "featureType": "scenicspots",
          "elementType": "labels.text.stroke",
          "stylers": {
            "weight": 1,
            "color": "#0b2c54ff",
            "visibility": "on"
          }
        }, {
          "featureType": "continent",
          "elementType": "labels.text.stroke",
          "stylers": {
            "color": "#0b2c54ff",
            "visibility": "on",
            "weight": 1
          }
        }, {
          "featureType": "country",
          "elementType": "labels.text.stroke",
          "stylers": {
            "color": "#0b2c54ff",
            "visibility": "on",
            "weight": 1
          }
        }, {
          "featureType": "city",
          "elementType": "labels.text.stroke",
          "stylers": {
            "color": "#0b2c54ff",
            "visibility": "on",
            "weight": 1
          }
        }, {
          "featureType": "city",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "scenicspotslabel",
          "elementType": "labels.text.stroke",
          "stylers": {
            "color": "#0b2c54ff",
            "visibility": "on",
            "weight": 1
          }
        }, {
          "featureType": "airportlabel",
          "elementType": "labels.text.stroke",
          "stylers": {
            "color": "#0b2c54ff",
            "visibility": "on",
            "weight": 1
          }
        }, {
          "featureType": "transportationlabel",
          "elementType": "labels.text.stroke",
          "stylers": {
            "color": "#0b2c54ff",
            "visibility": "on",
            "weight": 1
          }
        }, {
          "featureType": "railway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "subway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "highwaysign",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "nationalwaysign",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "nationalwaysign",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "provincialwaysign",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "provincialwaysign",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "tertiarywaysign",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "tertiarywaysign",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "subwaylabel",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "subwaylabel",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "road",
          "elementType": "labels.text.fill",
          "stylers": {
            "color": "#062444ff",
            "visibility": "on",
            "weight": 90
          }
        }, {
          "featureType": "road",
          "elementType": "labels.text.stroke",
          "stylers": {
            "color": "#0b2c54ff",
            "visibility": "on",
            "weight": 1
          }
        }, {
          "featureType": "shopping",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "scenicspots",
          "elementType": "labels",
          "stylers": {
            "visibility": "on"
          }
        }, {
          "featureType": "scenicspotslabel",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "manmade",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "manmade",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "highwaysign",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "water",
          "elementType": "labels.text.stroke",
          "stylers": {
            "color": "#0c315600",
            "visibility": "on"
          }
        }, {
          "featureType": "road",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "6"
          }
        }, {
          "featureType": "road",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "7"
          }
        }, {
          "featureType": "road",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "8"
          }
        }, {
          "featureType": "road",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "9"
          }
        }, {
          "featureType": "road",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "6"
          }
        }, {
          "featureType": "road",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "7"
          }
        }, {
          "featureType": "road",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "8"
          }
        }, {
          "featureType": "road",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "9"
          }
        }, {
          "featureType": "road",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "6"
          }
        }, {
          "featureType": "road",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "7"
          }
        }, {
          "featureType": "road",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "8"
          }
        }, {
          "featureType": "road",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "9"
          }
        }, {
          "featureType": "road",
          "elementType": "labels.text",
          "stylers": {
            "fontsize": 24
          }
        }, {
          "featureType": "highway",
          "elementType": "labels.text.stroke",
          "stylers": {
            "color": "#0b2c54ff",
            "visibility": "on",
            "weight": 1
          }
        }, {
          "featureType": "highway",
          "elementType": "geometry.fill",
          "stylers": {
            "color": "#0a2b4dff",
            "visibility": "on"
          }
        }, {
          "featureType": "highway",
          "elementType": "geometry.stroke",
          "stylers": {
            "color": "#1c4f7eff"
          }
        }, {
          "featureType": "highway",
          "elementType": "labels.text.fill",
          "stylers": {
            "color": "#062444ff",
            "visibility": "on"
          }
        }, {
          "featureType": "highway",
          "elementType": "geometry",
          "stylers": {
            "weight": 3
          }
        }, {
          "featureType": "nationalway",
          "elementType": "geometry.fill",
          "stylers": {
            "color": "#0a2b4dff",
            "visibility": "on"
          }
        }, {
          "featureType": "nationalway",
          "elementType": "geometry.stroke",
          "stylers": {
            "color": "#1c4f7eff"
          }
        }, {
          "featureType": "nationalway",
          "elementType": "labels.text.fill",
          "stylers": {
            "color": "#062444ff",
            "visibility": "on"
          }
        }, {
          "featureType": "nationalway",
          "elementType": "labels.text.stroke",
          "stylers": {
            "color": "#0b2c54ff",
            "visibility": "on",
            "weight": 1
          }
        }, {
          "featureType": "nationalway",
          "elementType": "geometry",
          "stylers": {
            "weight": 3
          }
        }, {
          "featureType": "provincialway",
          "elementType": "geometry.fill",
          "stylers": {
            "color": "#0a2b4dff",
            "visibility": "on"
          }
        }, {
          "featureType": "cityhighway",
          "elementType": "geometry.fill",
          "stylers": {
            "color": "#0a2b4dff",
            "visibility": "on"
          }
        }, {
          "featureType": "arterial",
          "elementType": "geometry.fill",
          "stylers": {
            "color": "#0a2b4dff",
            "visibility": "on"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "geometry.fill",
          "stylers": {
            "color": "#0a2b4dff",
            "visibility": "on"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "geometry.fill",
          "stylers": {
            "color": "#0a2b4dff",
            "visibility": "on"
          }
        }, {
          "featureType": "local",
          "elementType": "geometry.fill",
          "stylers": {
            "color": "#0a2b4dff",
            "visibility": "on"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "geometry.stroke",
          "stylers": {
            "color": "#000825ff",
            "visibility": "on"
          }
        }, {
          "featureType": "cityhighway",
          "elementType": "geometry.stroke",
          "stylers": {
            "color": "#000825ff",
            "visibility": "on"
          }
        }, {
          "featureType": "arterial",
          "elementType": "geometry.stroke",
          "stylers": {
            "color": "#000825ff",
            "visibility": "on"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "geometry.stroke",
          "stylers": {
            "color": "#000825ff",
            "visibility": "on"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "geometry.stroke",
          "stylers": {
            "color": "#000825ff",
            "visibility": "on"
          }
        }, {
          "featureType": "local",
          "elementType": "geometry.stroke",
          "stylers": {
            "color": "#000825ff",
            "visibility": "on"
          }
        }, {
          "featureType": "local",
          "elementType": "labels.text.fill",
          "stylers": {
            "color": "#062444ff",
            "visibility": "on"
          }
        }, {
          "featureType": "local",
          "elementType": "labels.text.stroke",
          "stylers": {
            "color": "#0b2c54ff",
            "visibility": "on",
            "weight": 1
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "labels.text.fill",
          "stylers": {
            "color": "#062444ff",
            "visibility": "on"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "labels.text.fill",
          "stylers": {
            "color": "#062444ff",
            "visibility": "on"
          }
        }, {
          "featureType": "arterial",
          "elementType": "labels.text.fill",
          "stylers": {
            "color": "#062444ff",
            "visibility": "on"
          }
        }, {
          "featureType": "cityhighway",
          "elementType": "labels.text.fill",
          "stylers": {
            "color": "#062444ff",
            "visibility": "on"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "labels.text.fill",
          "stylers": {
            "color": "#062444ff",
            "visibility": "on"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "labels.text.stroke",
          "stylers": {
            "color": "#0b2c54ff",
            "visibility": "on",
            "weight": 1
          }
        }, {
          "featureType": "cityhighway",
          "elementType": "labels.text.stroke",
          "stylers": {
            "color": "#0b2c54ff",
            "visibility": "on",
            "weight": 1
          }
        }, {
          "featureType": "arterial",
          "elementType": "labels.text.stroke",
          "stylers": {
            "color": "#0b2c54ff",
            "visibility": "on",
            "weight": 1
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "labels.text.stroke",
          "stylers": {
            "color": "#0b2c54ff",
            "visibility": "on",
            "weight": 1
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "labels.text.stroke",
          "stylers": {
            "color": "#0b2c54ff",
            "visibility": "on",
            "weight": 1
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "geometry",
          "stylers": {
            "weight": 1
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "geometry",
          "stylers": {
            "weight": 1
          }
        }, {
          "featureType": "local",
          "elementType": "geometry",
          "stylers": {
            "weight": 1
          }
        }, {
          "featureType": "provincialway",
          "elementType": "geometry",
          "stylers": {
            "weight": 3
          }
        }, {
          "featureType": "cityhighway",
          "elementType": "geometry",
          "stylers": {
            "weight": 3
          }
        }, {
          "featureType": "arterial",
          "elementType": "geometry",
          "stylers": {
            "weight": 3
          }
        }, {
          "featureType": "highway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "6"
          }
        }, {
          "featureType": "highway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "7"
          }
        }, {
          "featureType": "highway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "8"
          }
        }, {
          "featureType": "highway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "9"
          }
        }, {
          "featureType": "highway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "6"
          }
        }, {
          "featureType": "highway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "7"
          }
        }, {
          "featureType": "highway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "8"
          }
        }, {
          "featureType": "highway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "9"
          }
        }, {
          "featureType": "highway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "6"
          }
        }, {
          "featureType": "highway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "7"
          }
        }, {
          "featureType": "highway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "8"
          }
        }, {
          "featureType": "highway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "9"
          }
        }, {
          "featureType": "nationalway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "6"
          }
        }, {
          "featureType": "nationalway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "7"
          }
        }, {
          "featureType": "nationalway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "8"
          }
        }, {
          "featureType": "nationalway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "9"
          }
        }, {
          "featureType": "nationalway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "6"
          }
        }, {
          "featureType": "nationalway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "7"
          }
        }, {
          "featureType": "nationalway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "8"
          }
        }, {
          "featureType": "nationalway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "9"
          }
        }, {
          "featureType": "nationalway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "6"
          }
        }, {
          "featureType": "nationalway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "7"
          }
        }, {
          "featureType": "nationalway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "8"
          }
        }, {
          "featureType": "nationalway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "9"
          }
        }, {
          "featureType": "provincialway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "8,10",
            "level": "8"
          }
        }, {
          "featureType": "provincialway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "8,10",
            "level": "9"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "8,10",
            "level": "8"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "8,10",
            "level": "9"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "8,10",
            "level": "8"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "8,10",
            "level": "9"
          }
        }, {
          "featureType": "cityhighway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "6"
          }
        }, {
          "featureType": "cityhighway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "7"
          }
        }, {
          "featureType": "cityhighway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "8"
          }
        }, {
          "featureType": "cityhighway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "9"
          }
        }, {
          "featureType": "cityhighway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "6"
          }
        }, {
          "featureType": "cityhighway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "7"
          }
        }, {
          "featureType": "cityhighway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "8"
          }
        }, {
          "featureType": "cityhighway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "9"
          }
        }, {
          "featureType": "cityhighway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "6"
          }
        }, {
          "featureType": "cityhighway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "7"
          }
        }, {
          "featureType": "cityhighway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "8"
          }
        }, {
          "featureType": "cityhighway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "6,9",
            "level": "9"
          }
        }, {
          "featureType": "arterial",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "9,9",
            "level": "9"
          }
        }, {
          "featureType": "arterial",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "9,9",
            "level": "9"
          }
        }, {
          "featureType": "arterial",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "9,9",
            "level": "9"
          }
        }]
      })
      map.setMapType(BMAP_NORMAL_MAP);
      // 创建点坐标(可以使用百度地图拾取坐标系统获取指定的位置坐标)
      const point = new BMapGL.Point(list[0].longitude,list[0].latitude)
      // 初始化地图，设置中心点坐标和地图级别
      map.centerAndZoom(point, 10);
      // 启用滚轮缩放
      map.enableScrollWheelZoom(true);
      const bd = new BMapGL.Boundary();
      cityList.forEach(city => {
        bd.get(city, function (rs) {
          const hole = new BMapGL.Polygon(rs.boundaries, {
            fillColor: '#00eff2',
            fillOpacity: 0.2
          });
          map.addOverlay(hole);
        });
      })
      let niu = new BMapGL.Icon(niuIcon, new BMapGL.Size(40, 40));
      let yang = new BMapGL.Icon(yangIcon, new BMapGL.Size(40, 40));
      let tu = new BMapGL.Icon(tuIcon, new BMapGL.Size(40, 40));
      list.forEach(item => {
        // 在地图上添加标注
        const point = new BMapGL.Point(item.longitude,item.latitude)
        let marker = null

        if (item.farm_type === '羊场') {
          marker = new BMapGL.Marker(point, {
            icon: yang,
          });
        }
        if (item.farm_type === '牛场') {
          marker = new BMapGL.Marker(point, {
            icon: niu,
          });
        }
        if (item.farm_type === '兔场') {
          marker = new BMapGL.Marker(point, {
            icon: tu,
          });
        }
        marker.customeData = item
        marker.onclick = function (e) {
          let customDat = e.target.customeData
          if (customDat.farm_type === '羊场' || customDat.farm_type === '牛场') {
            window.open(`${domain}/#/page?farm_id=${customDat.farm_id}&farm_type=${customDat.farm_type}`)
          } else if (customDat.farm_type === '兔场') {
            window.open(`${domain}/#/page2?farm_id=${customDat.farm_id}&farm_type=${customDat.farm_type}`)
          }

        }
        map.addOverlay(marker);
      })
    });
  },
};
</script>

<template>
  <div class="page">
    <div class="map" id="mapBox">
    </div>
    <div class="content">
      <div class="head">
        <div class="title">
          畜牧场信息感知演示平台
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
::-webkit-scrollbar {
  width: 10px !important;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 147, 167, 0.8);
  height: 10px!important;
  border-radius: 1.786px!important;
}
::-webkit-scrollbar-track {
  background-color: #0e222e;
}
@font-face {
  font-family: "HuXiaoBo-NanShen-Regular";
  src: url("~@/assets/HuXiaoBoNanShenTi-2.otf");
}

@font-face {
  font-family: "Source Han Sans CN-Medium";
  src: url("~@/assets/SourceHanSansSC-Medium-2.otf");
}
@font-face {
  font-family: "Source Han Sans CN";
  src: url("~@/assets/SourceHanSansSC-Regular-2.otf");
}

.page {
  background-image: url("~@/assets/bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 15px;
  .map {
    position: absolute;
    left: 0;
    top: 0;
    width:100%;
    height: 100%;
    z-index: 0;
  }
  .content {
    height: 100%;
    background-image: url("~@/assets/head.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 0 30px 23px 30px;
    color: #fff;
    position: relative;
    z-index: 1;
    pointer-events: none;
    .head {
      position: relative;
      height: 87px;
      display: flex;
      justify-content: space-between;
      .date {
        position: absolute;
        width: 400px;
        line-height: 130px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        font-size: 21px;
        left: 21px;
        font-family: HuXiaoBo-NanShen-Regular, HuXiaoBo-NanShen;
        font-weight: 400;
        color: #55c1ff;
        margin-bottom: 20px;
        top: 35%;
        transform: translateY(-50%);
      }
      .title {
        font-size: 36px;
        line-height: 25px;
        font-family: HuXiaoBo-NanShen-Regular, HuXiaoBo-NanShen;
        font-weight: 400;
        color: #00eff2;
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        // line-height: 87px;
        // text-align: center;
        img {
          margin-bottom: 12px;
        }
      }
    }
    .body {
      height: calc(100% - 87px);
      display: flex;
      justify-content: space-between;
    }
  }
  .left {
    width: 519px;
    display: flex;
    flex-direction: column;
  }
  .card1 {
    .card-body {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .card1-item {
      width: 143px;
      height: 81px;
      background-image: url("~@/assets/组 116@2x.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .name {
        font-size: 12px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #55c1ff;
      }
      .value {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        .value1 {
          font-size: 25px;
          line-height: 25px;
          font-family: HuXiaoBo-NanShen-Regular, HuXiaoBo-NanShen;
          font-weight: 400;
          color: #00eff2;
        }
        .value2 {
          font-size: 14px;
          line-height: 14px;
          margin-bottom: 2px;
          margin-left: 6px;
        }
      }
    }
  }
  .card2 {
    height: 233px;
  }
  .card3 {
    margin-bottom: 0;
    .card3-item {
      display: flex;
      align-items: center;
      margin-top: 20px;
      justify-content: space-between;
      .name {
        height: 16px;
        font-size: 16px;
        line-height: 16px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #55c1ff;
      }
      .day {
        height: 16px;
        font-size: 16px;
        line-height: 16px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #fff;
      }
      &:nth-child(1) {
        margin-top: 0;
      }
    }
  }

  .right {
    width: 519px;
    display: flex;
    flex-direction: column;
  }
  .card5 {
    flex-grow: 1;
    padding-bottom: 0;
    pointer-events: auto;
    .card-body {
      padding: 10px 0;
    }
    .book-rank-table {
      width: 100%;
      th {
        color: #fff;
      }
      th,
      td {
        font-size: 16px;
        font-weight: 500;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        text-overflow: ellipsis;
        text-align: center;
        line-height: 28px;
        color: #55C1FF;
        .index {
          width: 80px;
        }
        .name {
          width: 230px;
        }
        .author {
          width: 120px;
        }
        .count {
          width: 100px;
        }
      }
      tr {
        cursor: pointer;
      }
      tr:hover {
        td {
          color: #FFB451 !important;
        }
      }
    }
  }

  .center {
    flex-grow: 1;
    position: relative;
    .box1 {
      position: absolute;
      right: 65px;
      top: 30px;
      width: 209px;
      height: 157px;
      background: rgba(0, 147, 167, 0.2);
      border-radius: 0px 0px 0px 0px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .name {
        text-align: center;
        height: 16px;
        font-size: 16px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
        margin-bottom: 20px;
      }
      .box1-item {
        width: 100%;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        img {
          width: 30px;
          height: 28px;
          margin-right: 14px;
        }
        .value {
          flex-grow: 1;
          display: flex;
          align-items: center;
          font-size: 23px;
          line-height: 28px;
          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
          font-weight: 500;
          .value1 {
            margin-right: 24px;
          }
        }
      }
      .box1-item1 {
        color: rgba(0, 189, 126, 1);
      }
      .box1-item2 {
        color: rgba(85, 193, 255, 1);
        margin-bottom: 0;
      }

      .left1 {
        position: absolute;
        left: -3px;
        top: -3px;
        width: 32px;
        height: 33px;
        background-image: url("~@/assets/left.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .left2 {
        position: absolute;
        left: -3px;
        bottom: -3px;
        width: 32px;
        height: 33px;
        background-image: url("~@/assets/left2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .right1 {
        position: absolute;
        right: -3px;
        top: -3px;
        width: 32px;
        height: 33px;
        background-image: url("~@/assets/right.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .right2 {
        position: absolute;
        right: -3px;
        bottom: -3px;
        width: 32px;
        height: 33px;
        background-image: url("~@/assets/right2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }

    .box2 {
      top: initial;
      left: 45px;
      bottom: 27px;
      width: 265px;
      height: 290px;
      padding:5px 17px;
      justify-content: flex-start;

      .name {
        margin-bottom: 0;
      }
      .box2-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        width: 100%;
        .box2-item-name {
          height: 16px;
          font-size: 16px;
          line-height: 16px;
          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
          font-weight: 500;
          color: #55c1ff;
        }
        .box2-item-value {
          height: 16px;
          font-size: 16px;

          line-height: 16px;
          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
          font-weight: 500;
          color: rgba(0, 189, 126, 1);
        }
      }
    }

    .box3 {
      position: absolute;
      right: 125px;
      bottom: 80px;
      .name {
        line-height: 16px;
        font-size: 16px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
        margin-bottom: 30px;
      }
      .box3-item {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        .icon {
          width: 20px;
          height: 20px;
          margin-right: 15px;
          background-image: url("~@/assets/组 21@2x.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .text {
          line-height: 16px;
          font-size: 16px;
          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
          font-weight: 500;
          color: rgba(180, 180, 180, 1);
        }
      }
      .box3-item.active {
          .icon {
            line-height: 16px;
            height: 20px;
            margin-right: 15px;
            background-image: url("~@/assets/组 20@2x.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }
          .text {
            line-height: 16px;
            font-size: 16px;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            font-weight: 500;
            color: #00ffff;
          }
      }
    }
  }
}
</style>
